Download Visual Studio Code

0:00

Check if Git is installed locally

0:56

Install Git

1:33

Clone Repository from GitHub

1:58

Make img folder locally

3:56

Make css and js folders in Visual Studio Code

4:28

Setup Git Username and Email

5:35

Commit first changes locally

6:30

Sync first changes with GitHub Repository

6:55

Create .gitignore file

8:01

Install Extensions to Visual Studio Code

8:50

Change Code Formatting Settings

9:28

Create HTML Boilerplate

10:05

Add CSS Stylesheet

12:21

Add stylesheet link in the Head

13:06

Confirm External stylesheet is working

13:49

Launch Live Server to check page locally

14:30

Commit CSS changes and sync to GitHub

14:52

Add images to local imp folder

15:58

Begin Coding Hero Image Header

17:25

Add basic CSS styles

19:25

Add hero image HTML code

24:05

Add hero image CSS styles

28:00

Replace hero image with video

40:00

Add CSS Media Queries

44:43

Commit Hero Header changes and push to GitHub

48:40

Begin Portfolio Section

49:35

Download Lightbox Javascript Code

50:00

Add Lightbox CSS link and Script tags

51:12

Add Portfolio HTML Code

53:21

Add Portfolio CSS styles

58:57

Add Image Captions to Lightbox

1:06:20

Add Portfolio Button to Header

1:09:00

Commit Portfolio and push to GitHub

1:16:00

Begin About Section

1:16:33

Add Font Awesome Icons

1:19:44

Add Font Awesome CSS link

1:24:18

Add Profile Image to About

1:25:05

Add About CSS styles

1:26:10

Commit About and push to GitHub

1:34:14

Begin Navigation Bar HTML

1:35:06

Navigation Bar CSS

1:41:00

Add position:sticky to .top-nav

1:59:45

Add Javascript Scroll styles to Navigation Bar

2:01:17

Add negative margin to Navigation Bar

2:05:45

Add anchor link scroll margin class

2:08:30

Add Footer

2:12:05
Jorge lazaro
Public
0/140
30.0 seconds
Continue clipping after ad finishes
Can’t create clip while ad is playing
Free Website Portfolio GitHub Pages Tutorial
What Make Art
51 Likes
1,665 Views
2021 Oct 18
Code a responsive one page portfolio website with mobile first CSS. Link to example code on GitHub - https://github.com/mutonaothenton/mut... First video showing how to setup GitHub and get free domain with the GitHub Student Developer Pack - https://youtu.be/PZTLD7LvbWw 0:00 Download Visual Studio Code 0:56 Check if Git is installed locally 1:33 Install Git 1:58 Clone Repository from GitHub 3:56 Make img folder locally 4:28 Make css and js folders in Visual Studio Code 5:35 Setup Git Username and Email 6:30 Commit first changes locally 6:55 Sync first changes with GitHub Repository 8:01 Create .gitignore file 8:50 Install Extensions to Visual Studio Code 9:28 Change Code Formatting Settings 10:05 Create HTML Boilerplate 12:21 Add CSS Stylesheet 13:06 Add stylesheet link in the Head 13:49 Confirm External stylesheet is working 14:30 Launch Live Server to check page locally 14:52 Commit CSS changes and sync to GitHub 15:58 Add images to local imp folder 17:25 Begin Coding Hero Image Header 19:25 Add basic CSS styles 24:05 Add hero image HTML code 28:00 Add hero image CSS styles 40:00 Replace hero image with video 44:43 Add CSS Media Queries 48:40 Commit Hero Header changes and push to GitHub 49:35 Begin Portfolio Section 50:00 Download Lightbox Javascript Code 51:12 Add Lightbox CSS link and Script tags 53:21 Add Portfolio HTML Code 58:57 Add Portfolio CSS styles 1:06:20 Add Image Captions to Lightbox 1:09:00 Add Portfolio Button to Header 1:16:00 Commit Portfolio and push to GitHub 1:16:33 Begin About Section 1:19:44 Add Font Awesome Icons 1:24:18 Add Font Awesome CSS link 1:25:05 Add Profile Image to About 1:26:10 Add About CSS styles 1:34:14 Commit About and push to GitHub 1:35:06 Begin Navigation Bar HTML 1:41:00 Navigation Bar CSS 1:59:45 Add position:sticky to .top-nav 2:01:17 Add Javascript Scroll styles to Navigation Bar 2:05:45 Add negative margin to Navigation Bar 2:08:30 Add anchor link scroll margin class 2:12:05 Add Footer Web Coding Tutorial Video Links: Set up Visual Studio Code - https://youtu.be/_WEyoLuuyYo HTML Crash Course - https://youtu.be/dk3F9ONez7M CSS Crash Course - https://youtu.be/KW25-M00YTw Flexbox in 15 Minutes - https://youtu.be/km1AL9-Z4CM Flexbox Responsive Navbar - https://youtu.be/yXhfUCXy2j4 Setup Git Username - https://youtu.be/ZeWx0XNUZWE ((this was a common problem but is now covered in the new intro video) CSS Grid Layout - https://youtu.be/nfsI_B4Puyo CSS Grid Gallery Layout - https://youtu.be/UDH--wrJ5eA Hero Image Fullscreen Homepage - https://youtu.be/FTNAAGYGO7I About Page - https://youtu.be/CZSUTs5UwCY Optimize Images for the Web - https://youtu.be/zCtuRLbS0U8 Portfolio with Lightbox - https://youtu.be/pjHdhUPAQKI Link to Web Coding Playlist - https://youtube.com/playlist?list=PL8... #portfolio #portfoliowebsite #html
How to Code a basic HTML webpage

Free Website Portfolio GitHub Pages Tutorial

What Make Art
8.68K subscribers